<template>
	<div id="mgr_user" class="w-h-100">
		<el-row :gutter="2" class="w-h-100">
			<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="4">
				<div class="tree-s" style="padding: 6px 0;">
					<el-card shadow="hover" class="h-sty" :body-style="{ paddingLeft: '0', paddingRight: '0' }">
						<el-tree 
							:data="treeData" 
							:highlight-current="true" 
							:default-expand-all="true" 
							:expand-on-click-node="false" 
							:props="defaultProps" 
							@node-click="handleNodeClick"
						>
						</el-tree>
					</el-card>
				</div>
			</el-col>
			
			<el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="20"> 
				<div class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box;overflow:hidden;">
                    <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px;">
                        <div style="box-sizing: border-box;">
							<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
								<el-form class="box-f" ref="queryForm" :inline="true">
									<el-form-item :label="$t('key_36')">
										<el-input style="width:160px;" v-model="searchOne" :placeholder="$t('key_37')" />
									</el-form-item>
									<el-form-item :label="$t('key_38')">
										<el-select style="width:120px;" v-model='searchTwo' :placeholder="$t('key_39')">
											<el-option
												v-for="item in statusInfo"
												:key="item.code"
												:label="item.value"
												:value="item.code"
											>
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item style="margin-right: 0">
										<el-button @click="resetClick" icon="ele-Refresh"> {{ $t('key_14') }} </el-button>
										<el-button @click="searchClick" type="primary" icon="ele-Search"> {{ $t('key_15') }} </el-button>
										<el-button v-if="$hasPer('use:add')" @click="addClick" type="primary" icon="ele-Plus"> {{ $t('xinZeng') }} </el-button>
									</el-form-item>
								</el-form>
							</el-card>
						</div>

						<div style="box-sizing: border-box;margin-top: 8px;" class="flex-1 pos-r">
							<div class="pos-a w-h-100" style="box-sizing: border-box;">
								<el-card class="box-card w-h-100" shadow="hover">
									<div style="" class="w-h-100 ver-flex">
										<div class="flex-1 pos-r">
											<div class="pos-a w-h-100">
												<el-table :data="list" class="w-h-100" border style="width: 100%" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
													<el-table-column type="index" :label="$t('key_4')" width="55" align="center" :index="indexMethod" />
													<el-table-column prop="account" :label="$t('key_40')" align="center" />
													<el-table-column prop="sysEmpInfo.jobNum" :label="$t('gongHao')" align="center" />
													<el-table-column :label="$t('zhuangTai')" align="center">
														<template #default="scope">
															<a style="color:#1890FF;" @click="statusChange(Number(scope.row.status) , scope.row.id , getData)" v-for="item in statusInfo" :key="item.code">
																{{ Number(item.code) === Number(scope.row.status) ? item.value : '' }}
															</a>
														</template>
													</el-table-column>
													<el-table-column :label="$t('caoZuo')" align="center" width="200">
														<template #default="scope">
															<el-button v-if="$hasPer('use:edit')" @click="editCilck(scope.row)" class="icon-e" icon="ele-Edit" size="small" text type="primary"> {{ $t('key_8') }} </el-button>
															<el-popconfirm confirm-button-text="确认" cancel-button-text="取消" icon="InfoFilled" icon-color="#626AEF" :title="$t('key_9')" @confirm="deleteHandle(scope.row, getData)">
																<template #reference>
																	<el-button v-if="$hasPer('use:del')" icon="ele-Delete" size="small" text type="danger"> {{ $t('key_10') }} </el-button>
																</template>
															</el-popconfirm>
															<el-dropdown size="small" trigger="click">
																<el-button v-if="$hasPer('use:reset') || $hasPer('use:role') || $hasPer('use:data')" class="icon-e" style="margin-left: 10px; position: relative" icon="ele-ArrowDown" size="small" text type="primary">{{ $t('key_11') }}</el-button>
																<template #dropdown>
																	<el-dropdown-menu>
																		<el-dropdown-item v-if="$hasPer('use:reset')" @click="menuClick('passWord',scope.row.id,getData)">{{ $t('key_41') }}</el-dropdown-item>
																		<el-dropdown-item v-if="$hasPer('use:role')" @click="menuClick('role',scope.row.id,getData)">{{ $t('key_42') }}</el-dropdown-item>
																		<el-dropdown-item v-if="$hasPer('use:data')" @click="menuClick('data',scope.row.id,getData)">{{ $t('key_13') }}</el-dropdown-item>
																	</el-dropdown-menu>
																</template>
															</el-dropdown>
														</template>
													</el-table-column>
												</el-table>
											</div>
										</div>
										<div style="height: 30px;margin-top: 20px;" class="hr-flex-start">
											<el-pagination
												v-model:currentPage="pageNo"
												v-model:page-size="pageSize"
												:total="totalRows"
												:page-sizes="[10, 20, 50, 100]"
												small
												background
												@size-change="handleSizeChange"
												@current-change="handleCurrentChange"
												layout="total, sizes, prev, pager, next, jumper"
												class="w-h-100"
											/>
										</div>
									</div>
								</el-card>
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<auth-menu :useId="useId" :isShowDialog="isShowDialog" @cancelMenuClick="cancelMenuClick" @controlMenuClick="controlMenuClick" />
		<auth-data :menuInfo="treeData" :useId="useId" :isDataDialog="isDataDialog" @cancelDataClick="cancelDataClick" @controlDataClick="controlDataClick" />
		<add-edit-mgr-user :menuInfo="treeData" :repairInfo="repairInfo" :isUseDialog="isUseDialog" @updateData="getData" @cancelUseClick="cancelUseClick" @controlUseClick="controlUseClick" />
	</div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, onMounted, toRaw, getCurrentInstance, toRefs, ComponentInternalInstance } from 'vue';
import AuthMenu from './component/auth-menu.vue';
import AuthData from './component/auth-data.vue';
import AddEditMgrUser from './component/add-edit-mgr-user.vue';
import getTableData from '/@/utils/getTableData';
import { getOrgTree , getUserPage , sysDictTypeDropDown , sysUserChangeStatus , sysUserResetPwd , sysUserDelete } from '/@/api/manage/manage.ts'
import { Action, ElMessageBox } from 'element-plus';
import { list } from 'postcss';
/*** 定义接口基础数据类型 */
interface data {
	repairInfo?: string;
	treeData: any[],
}
export default defineComponent({
	name: 'mgr_user',
	components: {
		AuthMenu,
		AuthData,
		AddEditMgrUser,
	},
	setup() {
		const isShowDialog = ref(); // 授权角色弹出框隐藏/显示
		const isDataDialog = ref(); // 授权数据弹出框隐藏/显示
		const isUseDialog = ref(); // 新增/编辑弹出框隐藏/显示
		const statusInfo = ref(); // 数据字典获取状态数据
		const useId = ref(); // 用户角色id
		const searchOne = ref()
		const searchTwo = ref('0')
		/*** 引用接口定义基础数据初始值 */
		const state = reactive<data>({
			repairInfo: '',
			treeData: [],
		});
		const searchObj = reactive({
            searchValue : '',
			'sysEmpParam.orgId': '',
        })

		const resetClick = () => {
			searchOne.value = ''
			searchTwo.value = '0'

			searchObj.searchValue = ''
			searchObj['sysEmpParam.orgId'] = ''
			Object.assign(searchObj,{searchStatus:searchTwo.value})
			treeDataFun()
		}
		const searchClick = () => {
			if(searchOne.value !== undefined){
                searchObj.searchValue = searchOne.value
            }
            Object.assign(searchObj,{searchStatus:searchTwo.value})
		}

		/*** GetStatus 获取字典状态状态数据 */
		const GetStatus = async () => {
			try {
                let res: { data: any[] } = await sysDictTypeDropDown({ code: 'common_status' })
				console.log(res.data,'数据库字典状态')
                statusInfo.value = res.data
            } catch (err) {}
		}

		const defaultProps: object = {
			children: 'children',
            label: 'title',
		};
		
		const treeDataFun = async () => {
            try {
                let res: { data: any[] } = await getOrgTree()
				console.log(res.data,'data树结构数据')
                state.treeData = res.data
            } catch (err) {}
        };

		const menuClick = (val: string , id: number | string , updateFun: Function) => {
			if (val === 'passWord') {
				ElMessageBox.alert(window.$t('key_43'), {
					confirmButtonText: window.$t('logOutConfirm'),
					callback: async (action: any) => {
						if(action === 'confirm' ){
							console.log('点击了确认走接口重置面')
							try {
								let res = await sysUserResetPwd({ id: id })
									if(res.success){
										updateFun()
									}
							} catch (err) {}
						}
					},
				});
			}
			if (val === 'role') {
				console.log(typeof id,'id')
				useId.value = id
				isShowDialog.value = true;
			}
			if (val === 'data') {
				useId.value = id
				isDataDialog.value = true;
			}
		};

		/*** statusChange 修改状态 */
		const statusChange = async (code:number , val: number | string , updateFun: Function) => {
			let remInfo = code === 0 ? window.$t('key_44') : window.$t('key_45')
			let status = 0
			if(code === 0){
				status = 1
			}else if(code === 1){
				status = 0
			}
			let param = {
				id: val,
				status: status
			}
			ElMessageBox.alert(remInfo,window.$t('logOutTitle'),{
				confirmButtonText: window.$t('logOutConfirm'),
				callback: async (action: any) => {
					if(action === 'confirm' ){
						console.log(param,'param')
						try {
						    let res = await sysUserChangeStatus(param)
						    if(res.success){
						        updateFun()
						    }
						} catch (err) { return }
					}
				}
			})
		}

		/*** deleteHandle 删除按钮点击事件 */
		const deleteHandle = async (val: object | string, updateFun: Function) => {
			try {
                let res = await sysUserDelete(toRaw(val))
                if(res.success){
                    updateFun()
                }
            } catch (err) { return }
			updateFun();
		};

		/*** handleNodeClick 树型当前节点点击事件 */
		const handleNodeClick = (data: any, node: any, obj: any) => {
			const setNode = toRaw(node);
			console.log(setNode.data, 'node');
			searchObj['sysEmpParam.orgId'] = setNode.data.id
		};

		/** cancelMenuClick 授权菜单取消按钮 */
		const cancelMenuClick = () => {
			isShowDialog.value = false;
		};

		/** controlMenuClick 授权菜单确定按钮 */
		const controlMenuClick = () => {
			isShowDialog.value = false;
		};

		/** cancelDataClick 授权数据取消按钮 */
		const cancelDataClick = () => {
			isDataDialog.value = false;
		};

		/** controlDataClick 授权数据确定按钮 */
		const controlDataClick = () => {
			isDataDialog.value = false;
		};

		/*** addClick 新增用户 */
		const addClick = () => {
			state.repairInfo = '';
			isUseDialog.value = true;
		};

		/*** editCilck 编辑用户 */
		const editCilck = (val: any) => {
			state.repairInfo = JSON.stringify(val);
			isUseDialog.value = true;
		};

		/*** cancelUseClick 新增/编辑取消事件 */
		const cancelUseClick = () => {
			isUseDialog.value = false;
		};

		/*** controlUseClick 新增/编辑提交事件 */
		const controlUseClick = () => {
			isUseDialog.value = false;
		};

		/*** onMounted 数据加载 */
		onMounted(() => {
			treeDataFun()
			GetStatus()
		}) 

		return {
			defaultProps,
			isShowDialog,
			isDataDialog,
			cancelMenuClick,
			controlMenuClick,
			cancelDataClick,
			controlDataClick,
			...getTableData(getUserPage,{},searchObj),
			menuClick,
			deleteHandle,
			handleNodeClick,
			addClick,
			editCilck,
			isUseDialog,
			cancelUseClick,
			controlUseClick,
			...toRefs(state),
			statusInfo,
			statusChange,
			useId,
			searchOne,
			searchTwo,
			resetClick,
			searchClick,
		};
	},
});
</script>
<style scoped lang="scss">
#mgr_user {
	:deep(.el-card__body) {
		height: 100%;
	}
	.box-f{
		:deep(.el-form-item__label){
			padding: 0;
		}
	}
	ul {
		list-style: none;

		li {
			cursor: pointer;

			&:hover {
				color: red;
			}
		}
	}
	.tree-s{
		height: calc(100vh - 157px);
		overflow-y: auto;
	}
	.h-sty {
		height: 100%;
		overflow: auto;
	}
	.icon-e {
		:deep(.el-icon) {
			margin-right: 0px !important;
		}
	}
}
</style>
